<template>
	<view class="box" :style="{backgroundColor:box_bg}">
		<view class="title" @click="changeClick" :style="{backgroundColor:title_bg,borderBottom:title_border ? '1rpx solid rgba(0,0,0,0.1)' : 'none',}">
			<slot name="title" :data="isOpen">
				<view class="left" :style="titleStyle">
					{{title}}
				</view>
				<image  v-if="isOpen" :src="$img_path('/course/classify/icon8.png')" mode="widthFix"></image>
				<image v-else :src="$img_path('/course/classify/icon7.png')" mode="widthFix"></image>
			</slot>
		</view>
		<view class="content" :class="isOpen ?'show' : 'hide'">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"collapse",
		props:{
			title:{
				type:String,
				default:'折叠标题'
			},
			titleStyle:{
				type:Object,
				default:null
			},
			open:{
				type:Boolean,
				default:false
			},
			box_bg:{
				type:String,
				default:'#FFFFFF'
			},
			title_bg:{
				type:String,
				default:'#FFFFFF'
			},
			title_border:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				isOpen:this.open||false,
				domHeight:null,
			};
		},
		watch:{
			open(val){
				this.isOpen = val
			}
		},
		mounted() {
		},
		methods:{
			changeClick(){
				this.isOpen=!this.isOpen
				this.$emit('change',this.isOpen)
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	background-color: #FFFFFF;
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 22rpx;
		.left{
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			line-height: 48rpx;
		}
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
	.content{
		transition: all .4s;
		overflow: hidden;
		&.show{
			height: auto;
		}
		&.hide{
			height: 0;
		}
	}
}
</style>